<!--
*******************************************************************************
 * Copyright © 2022-2023 VMware, Inc. All Rights Reserved.
 * Copyright © 2022 Intel Corporation
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<div class="card">
    <div class="card-header">
        <i class="fa fa-list text-danger mr-2"></i>
        <span class="font-weight-bold" i18n>Rule List</span>
    </div>
    <div class="card-header p-2">
        <div class="btn-group btn-group-sm" role="group">
            <button class="btn btn-primary" (click)="refresh()">
                <i class="fa fa-refresh mr-1"></i>
                <span i18n>Refresh</span>
            </button>
            <button type="button" class="btn btn-info"  routerLink="../add-rules">
                <i class="fa fa-plus mr-1"></i><span i18n>Add</span>
            </button>
            <button type="button" class="btn btn-success" (click)="edit()" [disabled]="selectedRules.length !== 1">
                <i class="fa fa-edit mr-1"></i><span i18n>Edit</span>
            </button>
            <button type="button" class="btn btn-danger" (click)="deleteConfirm()" [disabled]="selectedRules.length === 0">
                <i class="fa fa-trash mr-1"></i><span i18n>Delete</span>
            </button>
        </div>
    </div>
    <div class="card-body p-0">
        <div class="table-responsive">
            <table class="table table-hover text-truncate">
                <thead class="thead-light">
                    <tr>
                      <th scope="col"><input type="checkbox" role="button" [checked]="isCheckedAll()" (click)="selectAll($event)"></th>
                      <th scope="col" i18n>ID</th>
                      <th scope="col" i18n>Status</th>
                      <th scope="col" class="text-center" i18n>Status Metrics</th>
                      <th scope="col" i18n>Operaion</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let rule of rulesList;" [class.table-active]="isChecked(rule.id)">
                        <td> <input type="checkbox" role="button"  [checked]="isChecked(rule.id)" (click)="selectOne($event,rule)"></td>
                        <td class="user-select-all">{{rule.id}}</td>
                        <td>
                            <span *ngIf="operationStatus">
                                <div class="spinner-border spinner-border-sm text-secondary" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </span>
                            <span *ngIf="!operationStatus">
                                {{rule.status}}
                            </span>
                        </td>
                        <td class="text-center">
                            <i role="button" class="fa fa-line-chart text-primary" [class.text-info]="statusMetricsRuleID === rule.id" (click)="statusMetrics(rule.id)"></i>
                        </td>
                        <td>
                            <span *ngIf="operationStatus">
                                <div class="spinner-border spinner-border-sm mr-1 text-success" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                <div class="spinner-border spinner-border-sm mr-1 text-info" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                                <div class="spinner-border spinner-border-sm mr-1 text-danger" role="status">
                                    <span class="sr-only">Loading...</span>
                                </div>
                            </span>
                            <span *ngIf="!operationStatus">
                                <span role="button" class="badge badge-success mr-1" (click)="execute(rule.id, 'start')" i18n>start</span>
                                <span role="button" class="badge badge-info mr-1" (click)="execute(rule.id, 'restart')" i18n>restart</span>
                                <span role="button" class="badge badge-danger mr-1" (click)="execute(rule.id, 'stop')" i18n>stop</span>
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

<div class="card mt-3" *ngIf="ruleStatusMetrics && statusMetricsRuleID">
    <div class="card-header">
        <i class="fa fa-line-chart mr-2 text-info"></i>
        <span class="mr-2 font-weight-bold">{{ statusMetricsRuleID }}</span><span i18n>Status Metrics</span>
        <span class="badge badge-primary mx-2" role="button" (click)="statusMetricsRefresh(statusMetricsRuleID)">
            <i class="fa fa-refresh mr-1"></i>
            <span i18n>refresh</span>
        </span>

        <span class="align-bottom" role="button">
            <i class="fa fa-window-close fa-lg text-danger float-right mt-1" (click)="statusMetricsShowClose()"></i>
        </span>
    </div>
    <div class="card-body">
        <pre class="p-2">{{ruleStatusMetrics}}</pre>
    </div>
</div>

<div class="modal fade" id="deleteConfirmDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="deleteConfirmDialogLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title text-danger" id="deleteConfirmDialogLabel">
                    <i class="fa fa-warning mr-1"></i>
                    <span i18n>Warning</span>
                </h5>
            </div>
            <div class="modal-body" i18n>
                The data will be permanently erased!!! Are you sure to execute delete operation？
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal" i18n>Cancel</button>
                <button type="button" class="btn btn-danger" (click)="delete()" i18n>Confirm</button>
            </div>
        </div>
    </div>
</div>
